<template>
  <div class="container">
    <div>
      <nav>
        <ul>
          <li
            v-for="(item, index) in menuItems"
            :key="index"
            :class="{ active: isActive(item) }"
            @click="go(item)"
          >
            <i :class="item.iconClass"></i>
            <span>{{ item.label }}</span>
          </li>
        </ul>
      </nav>
    </div>
    <div>
      <my-self/>
    </div>
  </div>
</template>

<script>
import MySelf from '@/views/component/MySelfBar.vue'
import { constantRoutes } from '@/router'

export default {
  name: 'TopBar',
  components: { MySelf },
  data() {
    return {
    }
  },
  computed: {
    menuItems() {
      const rootRoute = constantRoutes.find(r => r.path === '/')
      if (!rootRoute) return []
      return rootRoute.children
        .filter(r => !r.hidden)
        .map(r => ({
          label: r.meta?.title || r.name,
          iconClass: r.meta?.icon || 'fa-solid fa-circle',
          path: r.path.startsWith('/') ? r.path : `/${r.path}`
        }))
    }
  },
  methods: {
    go(item) {
      this.$router.push(item.path)
    },
    isActive(item) {
      return this.$route.path.startsWith(item.path)
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

nav {
  background: #ffffff;
  border-radius: 50px;
  box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);
}

nav ul li {
  list-style: none;
  display: inline-block;
  padding: 10px 35px;
  margin: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #777;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.5s;
}

nav ul li::after {
  content: '';
  background: #cfcaca;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  transition: top 0.5s, opacity 0.5s;
}

nav ul li:hover {
  color: #fff;
}

nav ul li:hover::after {
  top: 50%;
  opacity: 1;
}

/* 点击高亮样式 */
nav ul li.active {
  color: #fff;
}

nav ul li.active::after {
  top: 50%;
  opacity: 1;
  background: #3399ff;
}
</style>
